/* eslint-disable max-lines */
import tinycolor from 'tinycolor2'

const { echarts } = window

export default {
  legend: {
    show: true,
    type: 'scroll',
    x: 'center',
    y: 'top',
    // icon: 'circle',
    // orient: 'horizontal',
    // textStyle: {
    //     color: '#B9B8CE',
    //     fontSize: 18,
    // },
    // itemHeight: 15,
    // itemWidth: 15,
    pageTextStyle: { color: '#ffffff' }
  },
  xAxis: {
    show: true,
    name: '',
    nameGap: 15,
    nameTextStyle: {
      color: '#fff',
      fontSize: 12
    },
    inverse: false,
    axisLabel: {
      show: true,
      fontSize: 12,
      color: '#fff',
      rotate: 0
    },
    position: 'bottom',
    // axisLine: {
    //     show: true,
    //     lineStyle: {
    //         color: '#B9B8CE',
    //         width: 1,
    //     },
    //     onZero: true,
    // },

    type: 'category'
  },
  yAxis: {
    show: true,
    name: '',
    nameGap: 15,
    nameTextStyle: {
      color: '#B9B8CE',
      fontSize: 12
    },
    axisLabel: {
      show: true,
      fontSize: 12,
      color: '#fff',
      rotate: 0
    },
    inverse: false,
    position: 'left',
    type: 'value'
    // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  grid: {
    show: false,
    left: '10%',
    top: '60',
    right: '10%',
    bottom: '60'
  },
  tooltip: {
    show: true,
    trigger: 'axis',
    axisPointer: { type: 'line' }
  },
  dataset: {
    dimensions: [
      'product',
      'data1',
      'data2'
    ],
    source: [
      {
        product: 'Mon',
        data1: 120,
        data2: 60
      },
      {
        product: 'Tue',
        data1: 200,
        data2: 160
      },
      {
        product: 'Wed',
        data1: 150,
        data2: 260
      },
      {
        product: 'Thu',
        data1: 80,
        data2: 160
      },
      {
        product: 'Fri',
        data1: 70,
        data2: 360
      },
      {
        product: 'Sat',
        data1: 110,
        data2: 160
      },
      {
        product: 'Sun',
        data1: 130,
        data2: 260
      }
    ]
  },
  series: [
    {
      type: 'line',
      name: 'test1',
      label: {
        show: true,
        position: 'top',
        color: '#fff',
        fontSize: 12
      },
      symbolSize: 5,
      lineStyle: {
        type: 'solid',
        width: 3,
        color: null
      },
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: tinycolor('#96dee8').setAlpha(0.8).toString()
          },
          {
            offset: 1,
            color: tinycolor('#1FE7E7').setAlpha(0.01).toString()
          }
        ])
      }
    },
    {
      type: 'line',
      name: 'test2',
      label: {
        show: true,
        position: 'top',
        color: '#fff',
        fontSize: 12
      },
      symbolSize: 5,
      lineStyle: {
        type: 'solid',
        width: 3,
        color: null
      },
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: tinycolor('#1FE7E7').setAlpha(0.8).toString()
          },
          {
            offset: 1,
            color: tinycolor('#6be6c1').setAlpha(0.01).toString()
          }
        ])
      }
    }
  ],
  backgroundColor: 'rgba(0,0,0,0)'
}
